$("nav>.row>:nth-child(2)").mouseover(function(){
  $(this).find("ul").css("display","flex")
})
$("nav>.row>:nth-child(2)").mouseout(function(){
  $(this).find("ul").css("display","none")
})

$("main>div>p>span").click(function(){
  console.log("aaa")
  window.location.href="./index.html"
})

let total
const info = {
  current: 1,
  pagesize: 12,
  search: "",
  filter: "",
  saleType: 10,
  sortType: "id",
  sortMethod: "ASC",
  category: ""
}
Listitem()
async function Listitem(flag) {
  const { list } = await $.ajax({
    url: "http://localhost:8888/goods/category",
    dataType: "json"
  })
  let str = '<li class="active cate">全部</li>'

  if (flag) {
    for (let i = 0; i < 27; i++) {
      str += `
      <li class="cate">${list[i]}</li>
    `
    }
  } else {
    for (let i = 0; i < 6; i++) {
      str += `
      <li class="cate">${list[i]}</li>
    `
    }
  }
  $("main>div:nth-child(2)>.center").html(str)
}
$("main>div:nth-child(2)>div.right").click(function () {
  $(this).parent().toggleClass("active")
  if ($(this).parent().css("height") === "84px") {
    Listitem(true)
    $(this).parent().animate({ "height": 360 }, 300)
  } else {
    Listitem(false)
    $(this).parent().animate({ "height": 84 }, 300)
  }
})
List()
async function List(epage) {
  const res = await $.ajax({
    url: "http://localhost:8888/goods/list",
    dataType: "json",
    data: info
  })
  let str = ''
  res.list.forEach(item => {
    str += `<li data-id=${item.goods_id}>
    <img src="${item.img_big_logo}">
    <div>
      <p class="title">${item.title}</p>
      <div class="price"><span class="current">${item.current_price}元</span> <del class="old">${item.price}元</del></div>
    </div>
    <div>
          ${item.is_hot ? '<span class="hot">HOT</span>' : ''}
          ${item.is_sale ? '<span class="sale">SALE</span>' : ''}
    </div>
  </li>`
  })
  $("main>ul").html(str)
  total = +res.total

  if(!epage){
    epage=info.current
  }else{
    epage=epage
  }
  console.log(total)
  if (total < 6) {
    Button4()
  } else {
    if (epage > total - 2) {
      Button3()
    } else if (epage < 5) {
      Button1()
    } else if (epage > 4) {
      Button2()
    }
  }
}
const main = document.querySelector("main")
main.addEventListener("click", e => {
  if (e.target.className === "cate") {
    $(e.target).addClass("active").siblings().removeClass("active")
    info.category = e.target.innerText === "全部" ? "" : e.target.innerText
    info.current = 1
    List()
  }
  if (e.target.className === "sort_item") {
    for (let i = 0; i < e.target.parentElement.children.length; i++) {
      e.target.parentElement.children[i].classList.remove("active")
    }
    e.target.classList.add("active")
    info.sortType = e.target.dataset.type
    info.sortMethod = e.target.dataset.method
    info.current = 1
    List()
  }
  if (e.target.className === "sort_item1" || e.target.className === "sort_item1 active") {
    console.log("sss")
    $(e.target).addClass("active").siblings().removeClass("active")
    $(e.target).children().toggleClass("icon-jiantou_xiangshang")
    $(e.target).children().toggleClass("icon-jiantou_xiangxia")
    info.sortType = e.target.dataset.type
    if (e.target.dataset.method === "ASC") {
      e.target.dataset.method = "DESC"
      console.log(e.target.dataset.method)
    } else {
      e.target.dataset.method = "ASC"
    }
    info.sortMethod = e.target.dataset.method
    info.current = 1
    List()
  }
  if (e.target.className === "filter_item") {
    const inp = document.querySelectorAll(".filter_item>input")
    let count = 0
    setTimeout(function () {
      inp.forEach(t => {
        if (t.checked) count++
      })
      if (count === 2) {
        info.filter = "hot,sale"
      } else if (count === 1) {
        info.filter = $("label>input:checked")[0].dataset.type
        console.log($("label>input:checked"))
      } else {
        info.filter=""
      }
      info.current = 1
      List()
    }, 1)
  }
  if (e.target.className === "num") {
    info.current = e.target.innerText
    List(e.target.innerText)
  }
  if (e.target.className === "prev") {
    info.current--
    List()
  }
  if (e.target.className === "next") {
    info.current++
    List()
  }

})
const li = document.querySelector("main>ul")
li.addEventListener("click", e => {
  if (e.target.nodeName === "LI") {
    const id = e.target.dataset.id
    window.location.href = "./details.html"
    window.sessionStorage.setItem("goodsId", id)
  }
})
function Button1() {
  let str = ''
  str += `
  <li class="${info.current == 1 ? 'prev disabled"' : 'prev"'}>&lt;</li>
  <li class=${info.current == 1 ? "active num" : "num"}>1</li>
  <li class=${info.current == 2 ? "active num" : "num"}>2</li>
  <li class=${info.current == 3 ? "active num" : "num"}>3</li>
  <li class=${info.current == 4 ? "active num" : "num"}>4</li>
  <li class=${info.current == 5 ? "active num" : "num"}>5</li>
  <li>...</li>
  <li class="num">${total}</li>
  <li class="${info.current == total ? 'next disabled"' : 'next"'}>&gt;</li>
  `
  $("main>div:last").html(str)
}
function Button2() {
  let str = ''

  str += `
      <li class="${info.current == 1 ? 'prev disabled"' : 'prev"'}>&lt;</li>
      <li class="num">1</li>
			<li>...</li>
			<li class=${info.current == +info.current - 2 ? "active num" : "num"}>${+info.current - 2}</li>
			<li class=${info.current == +info.current - 1 ? "active num" : "num"}>${+info.current - 1}</li>
			<li class=${info.current == +info.current ? "active num" : "num"}>${+info.current}</li>
			<li class=${info.current == +info.current + 1 ? "active num" : "num"}>${+info.current + 1}</li>
			<li class=${info.current == +info.current + 2 ? "active num" : "num"}>${+info.current + 2}</li>
			<li>...</li>
			<li class="num">${total}</li>
			<li class="${info.current == total ? 'next disabled"' : 'next"'}>&gt;</li>
  `
  $("main>div:last").html(str)
}
function Button3() {
  let str = ''
  str += `
      <li class=" ${info.current == 1 ? 'prev disabled"' : 'prev"'}>&lt;</li>
      <li class="num">1</li>
			<li>...</li>
			<li class=${info.current == +info.current - 4 ? "active num" : "num"}>${+info.current - 4}</li>
			<li class=${info.current == +info.current - 3 ? "active num" : "num"}>${+info.current - 3}</li>
			<li class=${info.current == +info.current - 2 ? "active num" : "num"}>${+info.current - 2}</li>
			<li class=${info.current == +info.current - 1 ? "active num" : "num"}>${+info.current - 1}</li>
			<li class=${info.current == total ? "active num" : "num"}>${total}</li>
			<li class="${info.current == total ? 'next disabled"' : 'next"'}>&gt;</li>
  `
  $("main>div:last").html(str)
}
function Button4() {
  let str = ''
  str += `
      <li class="${info.current == 1 ? 'prev disabled"' : 'prev"'}>&lt;</li>
			${(+total - 4 < 1) ? "" : "<li class=" + (info.current == total - 4 ? "active num" : "num") + ">" + (+total - 4) + "</li>"}
			${(+total - 3 < 1) ? "" : "<li class=" + (info.current == total - 3 ? "active num" : "num") + ">" + (+total - 3) + "</li>"}
			${(+total - 2 < 1) ? "" : "<li class=" + (info.current == total - 2 ? "active num" : "num") + ">" + (+total - 2) + "</li>"}
			${(+total - 1 < 1) ? "" : "<li class=" + (info.current == total - 1 ? "active num" : "num") + ">" + (+total - 1) + "</li>"}
			<li class=${info.current == total ? "active num" : "num"}>${total}</li>
			<li class="${info.current == total ? 'next disabled"' : 'next"'}>&gt;</li>
  `
  $("main>div:last").html(str)
}
$("section>.row>.col-lg-2").hover(function(){
  console.log("Aaa")
  $(this).css("z-index",11)
},function(){
  $(this).css("z-index",-10)
})
$("nav>.row>.col-lg-1>.iconfont").click(function(){
	window.location.href="./index.html"
})

